<template lang="pug">
    li.nav-item.dropdown.dropdown-lg.no-caret
        a.nav-link.dropdown-toggle#navbarDropdownPages(href='javascript:void(0)' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false')
            | {{title}}
            font-awesome-icon.dropdown-arrow(:icon='["fas", "chevron-right"]')
        .dropdown-menu.dropdown-menu-right.animated--fade-in-up(aria-labelledby='navbarDropdownPages')
            .row.no-gutters.px-3
                .col-lg-6.p-lg-5
                    template(v-for="(category,index) in categoryList.slice(0, midIndex)")
                        h6.dropdown-header.text-primary(:key="index") {{category.categoryName}}
                        template(v-for="item in category.itemList")
                            router-link.dropdown-item(:to="'/category/'+item.id") {{item.name}}
                        .dropdown-divider.border-0(v-if="index < midIndex")
                .col-lg-6.p-lg-5
                    template(v-for="(category,index) in categoryList.slice(midIndex, categoryList.length)")
                        h6.dropdown-header.text-primary(:key="index")  {{category.categoryName}}
                        template(v-for="item in category.itemList")
                            router-link.dropdown-item(:to="'/category/'+item.id") {{item.name}}
                        .dropdown-divider.border-0(v-if="index < categoryList.length-1")
</template>

<script>
export default {
    name: 'menu-default',
    props: {
        categoryList: {
            type: Array,
            default: () => [
                {
                    categoryName: 'Blog',
                    itemList: [
                        { name: 'Overview', url: '#' },
                        { name: 'Post', url: '#' },
                        { name: 'Archive', url: '#' },
                    ],
                },
            ],
        },
        title: String,
    },
    computed: {
        midIndex() {
            let max = 0;
            let count = 0;
            let index;

            this.categoryList.forEach(c => {
                max += c.itemList.length;
            });
            const maxSpace = max + this.categoryList.length * 2; //最大空间长度
            const midSpace = Math.ceil(maxSpace / 2) - 3; //换列的最小空间长度

            for (index = 0; index < this.categoryList.length; index++) {
                count += this.categoryList[index].itemList.length;
                const space = count + 2 * (index + 1); //当前所占空间长度
                if (space >= midSpace) break; //如果大于则退出
            }
            return index + 1;
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
